<template>
	<ul class="footer">
		<li @click="toIndex">
			<i class="fa fa-home"></i>
			<p>首页</p>
		</li>
		<li @click="toFind">
			<i class="fa fa-compass"></i>
			<p>发现</p>
		</li>
		<li @click="toOrderList">
			<i class="fa fa-file-text-o"></i>
			<p>订单</p>
		</li>
		<li @click="toMyPage">
			<i class="fa fa-user-o"></i>
			<p>我的</p>
		</li>
	</ul>
</template>

<script>
export default {
	name: 'Footer',
	methods: {
		navigateTo(url) {
			// 导航到指定页面
			window.location.href = url;
		},
		toIndex() {
			this.$router.push({ path: '/index' });
		},
		toFind() {
			this.$router.push({ path: '/find' });
		},
		toOrderList() {
			//this.$router.push({ path: '/orderList' });
			this.navigateTo('/orderList');
		},
		toMyPage() {
			this.$router.push({ path: '/myPage' });
		}
	}
}
</script>

<style>
.wrapper .footer {
	width: 100%;
	height: 14vw;
	border-top: solid 1vw #DDD;
	background-color: #fff;

	position: fixed;
	left: 0;
	bottom: 0;

	display: flex;
	justify-content: space-around;
	align-items: center;
}

.wrapper .footer li {
	/*li本身的尺寸完全由内容撑起*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	color: #999;
	user-select: none;
	cursor: pointer;
}

.wrapper .footer li p {
	font-size: 2.8vw;
}

.wrapper .footer li i {
	font-size: 5vw;
}
</style>